{include file="public/header" /}
<!--<body class="gray-bg">-->
<!--<div class="wrapper wrapper-content">-->
<!--<div class="ibox float-e-margins">-->
<!--&lt;!&ndash;<div class="ibox float-e-margins">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="ibox-content">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="row">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="col-sm-12">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="layui-form layui-form-item">&ndash;&gt;-->
<!--&lt;!&ndash;<div class="layui-col-md6 layui-input-inline">&ndash;&gt;-->
<!--&lt;!&ndash;<select name="day" lay-search="" class="layui-input">&ndash;&gt;-->
<!--&lt;!&ndash;<option  value="2">小时</option>&ndash;&gt;-->
<!--&lt;!&ndash;<option  value="1">天</option>&ndash;&gt;-->
<!--&lt;!&ndash;</select>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;<div class="layui-input-inline">&ndash;&gt;-->
<!--&lt;!&ndash;<button class="layui-btn" id="btn-search" lay-submit="" lay-filter="lunbo_type">立即搜索</button>&ndash;&gt;-->
<!--&lt;!&ndash;&lt;!&ndash;<button  class="layui-btn layui-btn-normal" id="empty">重置</button>&ndash;&gt;&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--&lt;!&ndash;</div>&ndash;&gt;-->
<!--<div class="layui-row layui-col-space15">-->
<!--<div class="layui-col-md6">-->
<!--<div class="layui-card">-->
<!--<div class="layui-card-header">下载</div>-->
<!--<div class="layui-card-body">-->

<!--<div id="main" style="width: auto;height:400px"></div>-->

<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="ibox float-e-margins">
        <div class="example-wrap">
            <div class="example">
                <div id="main" style="width: auto;height: 500px;text-align:center"></div>
            </div>
        </div>
    </div>
</div>
</div>
{include file="public/footer" /}
<!--<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=ad6f0f15b9ad019115db05b03454db84&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocode"></script>-->

<script>
    $(document).ready(function(){
        ajaxList();
    });
    function ajaxList() {
        $.ajax({
            url: "{:url('bbb')}",
            type: "post",
            dataType: "json",
            success: function (res) {
                columnPie('main',res);

            }
        });
    }

    function columnPie(id,dataX) {
        var myChart = echarts.init(document.getElementById(id));
        var geoCoordMap =   dataX;

        var convertData = function (data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        };

        option = {
            backgroundColor: '#404a59',
            title: {
                text: '全国主要城市空气质量',
                subtext: 'data from PM25.in',
                sublink: 'http://www.pm25.in',
                x:'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.name + ' : ' + params.value[2];
                }
            },
            legend: {
                orient: 'vertical',
                y: 'bottom',
                x:'right',
                data:['pm2.5'],
                textStyle: {
                    color: '#fff'
                }
            },
            visualMap: {
                min: 0,
                max: 200,
                calculable: true,
                inRange: {
                    color: ['#50a3ba', '#eac736', '#d94e5d']
                },
                textStyle: {
                    color: '#fff'
                }
            },
            geo: {
                map: 'china',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        areaColor: '#323c48',
                        borderColor: '#111'
                    },
                    emphasis: {
                        areaColor: '#2a333d'
                    }
                }
            },
            series: [
                {
                    name: 'pm2.5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    data: convertData([
                        {name: "海门", value: 9},
                        {name: "鄂尔多斯", value: 12},
                        {name: '招远', value: 12},
                    ]),
                    symbolSize: 12,
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    itemStyle: {
                        emphasis: {
                            borderColor: '#fff',
                            borderWidth: 1
                        }
                    }
                }
            ]
        }
        myChart.setOption(option);
    }
</script>
</body>
</html>